<jsp:useBean id="user" scope="session" type="com.wutong.eams.entity.User"/>
<jsp:useBean id="errorMessage" scope="request" type="com.wutong.eams.bean.ErrorMessage"/>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>教务管理系统 - 主界面</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/main.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/student.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // 默认加载个人信息
            loadContent('dashboard');

            // 导航点击事件
            $('.nav-link').click(function (e) {
                e.preventDefault();
                $('.nav-link').removeClass('active');
                $(this).addClass('active');
                var page = $(this).data('page');
                loadContent(page);
            });

            function loadContent(page) {
                $('.content-card').html('<div class="loading"><div class="spinner"></div>加载中...</div>');

                // 模拟AJAX请求
                setTimeout(function () {
                    $('.content-card').load(page);
                }, 500);
            }
        });
        $(document).ready(function() {
            // 用户头像点击事件
            $('#user-avatar').click(function(e) {
                e.stopPropagation(); // 阻止事件冒泡
                $('#userDropdown').toggle();
            });
            // 点击页面其他区域关闭下拉菜单
            $(document).click(function() {
                $('#userDropdown').hide();
            });
            // 阻止下拉菜单内部的点击事件冒泡
            $('#userDropdown').click(function(e) {
                e.stopPropagation();
            });
        });
    </script>
</head>
<body>
<!-- 左侧导航 -->
<div class="sidebar">
    <div class="logo">
        <h1><span class="logo-icon">📚</span>梧桐教务</h1>
    </div>
    <ul class="nav-menu">
        <li class="nav-item">
            <a href="#" class="nav-link active" data-page="dashboard">
                <span class="nav-icon">🏠</span> 系统首页
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" data-page="profile">
                <span class="nav-icon">👤</span> 个人信息
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" data-page="courses">
                <span class="nav-icon">📖</span> 课程管理
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" data-page="students">
                <span class="nav-icon">👨‍🎓</span> 学生管理
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" data-page="scores">
                <span class="nav-icon">📊</span> 成绩管理
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" data-page="schedule">
                <span class="nav-icon">🗓️</span> 教学安排
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" data-page="system">
                <span class="nav-icon">⚙️</span> 系统设置
            </a>
        </li>
    </ul>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <!-- 顶部栏 -->
    <div class="topbar">
        <div></div> <!-- 左侧留空 -->
        <div class="user-menu">
            <div class="user-info">
                <div class="user-name" id="user-name">${user.username}</div>
                <div class="user-role" id="user-role">${user.role == 'admin' ? '管理员' : (user.role == 'teacher' ? '教师' : '学生')}</div>
            </div>
            <!-- 新增的下拉菜单 -->
            <div style="position: relative;">
                <div class="user-avatar" id="user-avatar">${user.realName.charAt(0)}</div>
                <!-- 下拉菜单内容 -->
                <div style="position: absolute; right: 0; background: white; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
                     border-radius: 6px; overflow: hidden; display: none;" id="userDropdown">
                    <a href="${pageContext.request.contextPath}/api/auth/logout" methods="delete"
                       style="display: block; padding: 10px 20px; color: #2c3e50; text-decoration: none;
                              white-space: nowrap; text-align: left;"
                       onmouseover="this.style.background='#f8f9fa'"
                       onmouseout="this.style.background='white'">
                        <span style="margin-right: 8px;">🚪</span>退出登录
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 动态内容区 -->
    <div class="content-container">
        <div class="content-card">
            <!-- 内容由AJAX动态加载 -->
        </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        © 2025 梧桐教务管理系统 | 传承智慧 · 启迪未来
    </div>
</div>
</body>
</html>
